<template>
  <div class="app-container">
    <div v-loading="taxLoading" class="config-box">
      <el-divider content-position="left">税收率</el-divider>
      <div class="config-item">
        <el-input v-model="taxRate" type="number" :disabled="!taxEdit" :min="0" :max="100" placeholder="请输入税收率">
          <template slot="append">%</template>
        </el-input>
        <el-button v-if="taxEdit" :loading="taxEditLoading" type="primary" @click="handleSaveTax">保存</el-button>
        <el-button v-else type="warning" @click="taxEdit = true">编辑</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getTaxRate, setTaxRate } from '@/api/order'
export default {
  data () {
    return {
      taxRate: '',
      taxBak: '',
      taxEdit: false,
      taxLoading: false,
      taxEditLoading: false
    }
  },
  created () {
    this.fetchTax()
  },
  methods: {
    fetchTax () {
      this.taxLoading = true
      getTaxRate().then(res => {
        this.taxBak = res.data
        this.taxRate = res.data * 10000 / 100
        this.taxLoading = false
      }).catch(err => {
        console.log(err)
        this.taxLoading = false
      })
    },
    handleSaveTax () {
      this.taxEditLoading = true
      setTaxRate({ tax: this.taxRate / 100 }).then(res => {
        this.taxBak = res.data
        this.taxRate = res.data * 100
        this.taxEditLoading = false
        this.taxEdit = false
        this.$message.success(res.msg)
      }).catch(err => {
        console.log(err)
        this.taxEditLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.config-box {
  width: 100%;
  max-width: 450px;
  .el-divider__text {
    color: #AAA;
  }
}
.config-item {
  display: flex;
  justify-content: space-between;
  .el-input {
    margin-right: 10px;
  }
}
</style>
